<template>
	<div class="uiue-card" v-if="data" style="flex: 1">
		<a-steps :current="1" labelPlacement="vertical">
			<a-step
				v-for="(item, index) in data"
				:key="index"
				:title="item.text"
				:status="item.status"
				:description="item.linkName"
				responsive
			/>
		</a-steps>
	</div>
</template>

<script setup name="FlowChart">
import { cloneDeep } from 'lodash-es'
const props = defineProps({
	datas: {
		type: Object
	}
})
const data = ref()
const setChar = () => {
	const selectSteps = props.datas.selectSteps || 99
	data.value = cloneDeep(props.datas.flwdata)
	const index = data.value.findIndex((v) => v.linkId === selectSteps)
	data.value.forEach((v, i) => {
		if (i < index) {
			v.status = 'finish'
			v.text = '处理完成'
		}
		if (i == index) {
			if (v.linkId === 'a999') {
				v.status = 'finish'
				v.text = '处理完成'
			} else {
				v.status = 'process'
				v.text = '正在处理'
			}
		}
		if (i > index) {
			v.status = 'wait'
			v.text = '待处理'
		}
	})
}

watch(
	() => props.datas,
	(newValue, oldValue) => {
		if (newValue) setChar()
	},
	{ immediate: true }
)
</script>

<style lang="less" scoped>
.setp {
	height: calc(100vh - 280px);
}
</style>
